<template>
	<s-layout navbar="normal1" :bgStyle="{src:sheep.$url.cdn('/static/sign/sign-bg.png'),color:'transparent'}">
		<assNavbar title="商家签到" :background="{img:sheep.$url.cdn('/static/sign/sign-bg.png')}" color="#464646" />
		<view class="top-head ss-flex-row ss-row-between">
			<view class="switch-money ss-flex-row ss-col-bottom">
				<view class="tips">{{title}}</view>
				<image :src="sheep.$url.cdn('/static/sign/switch-img.png')" class="switch-img ss-m-l-8" @click="showAction"></image>
			</view>
			<!-- <view class="score ss-flex-row ss-row-between ss-col-bottom">积分签到</view> -->
			<view class="rules" @click="sheep.$router.go('/pages/public/richtext',{id:6,title:'活动规则'})">规则</view>
		</view>

		<view class="income ss-flex-col" @click="sheep.$router.go('/pages/sign/logs')">
			<view class="income-num">{{amount}}</view>
			<view class="income-tips">{{subtitle}}明细</view>
		</view>

		<view class="rewards-box ss-flex-col ss-row-right">
			<image :src="sheep.$url.cdn('/static/user/sign-jx.png')" class="sign-jx"></image>

			<view class="rewards">
				<view class="rewards-continue">已连签{{state.long_sign_days}}天</view>
				<view class="rewards-tips color-b">签到7天可获得 <text class="add color-r">+{{state.seven_days_point}}</text>
					收益</view>
			</view>
		</view>

		<!-- 打卡卡片 -->
		<clockin-card type="shop" :data="state.calendar_list" :point="state.every_day_point" @sign="sign"></clockin-card>
		<!-- 任务栏 -->
		<task-card :data="state.new" :day="state.day"></task-card>
		<!-- 积分兑换 -->
		<score-change @exchange="exchange"></score-change>
		
		
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		ref,
		reactive,
		computed,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import assNavbar from '@/components/ass-navbar.vue';
	import taskCard from './components/task-card.vue';
	import scoreChange from './components/score-change-merchant.vue';
	import clockinCard from './components/clockin-card.vue';
	
	const moneyList = [{title:'我的鲸豆',subtitle:'鲸豆'},{title:'我的鲸币',subtitle:'鲸币'},{title:'鲸囍通宝',subtitle:'通宝'}];
	
	const amount = computed(()=>{
		return state.actionIndex==0?state.j_point:(state.actionIndex==1?state.j_coin:state.jx_com_tongbao);
		
	})
	
	const title = computed(()=>{
		return  moneyList[state.actionIndex].title;
	})
	

	
	const subtitle = computed(()=>{
		return  moneyList[state.actionIndex].subtitle;
	})
	
	const state = reactive({
		actionIndex:0,
		j_point: '', //鲸豆余额
		j_coin: '', //鲸币余额,
		jx_com_tongbao: '', //鲸囍通宝
		long_sign_days: '', //long_sign_days
		new: [], //新人任务
		day: [], //日任务
		long: [], //long
		every_day_point: '', //连续签到天数
		seven_days_point: '', //七天赠送鲸豆数量
		calendar_list: [], //签到日历
	})

	onLoad(() => {
		getDetail();
	})
	

	async function getDetail() {
		const res = await sheep.$api.sign.detail({
			from:'shop'
		});
		if (res.error == 0) {
			state.j_point = res.data.j_point;
			state.j_coin = res.data.j_coin;
			state.jx_com_tongbao = res.data.jx_com_tongbao
			state.long_sign_days = res.data.long_sign_days
			state.new = res.data.new
			state.day = res.data.day
			state.long = res.data.long
			state.long_sign_days = res.data.long_sign_days
			state.seven_days_point = res.data.seven_days_point;
			state.every_day_point = res.data.every_day_point;
			state.calendar_list = res.data.calendar_list
		}
	}
	
	async function sign() {
		const res = await sheep.$api.point.signUp({
			from:'shop'
		});
		if (res.error == 0) {
			uni.showToast({
				title: res.msg,
				icon: 'none',
			})
			getDetail();
		}
	}
	//切换收益种类
	function showAction(){
		uni.showActionSheet({
			itemList: ['我的鲸豆', '我的鲸币','鲸囍通宝'],
			success: function (res) {
				state.actionIndex = res.tapIndex;
			},
			fail: function (res) {
				console.log(res.errMsg);
			}
		});
	}
	//积分兑换
	async function exchange(e){
		
		if(e.type=='jx_com_tongbao'&&e.amount>state.j_coin){
			uni.showToast({
				title:'余额不足',
				icon:'none',
			});
			return;
		}
		
		if(e.type=='j_coin'&&e.amount>state.j_point){
			uni.showToast({
				title:'余额不足',
				icon:'none',
			});
			return;
		}

		uni.showLoading({
			title: '加载中',
		})
		let data = {type:e.type,number:e.amount,sure:1,from:'shop'};
		const res = await sheep.$api.sign.transfer(data);
		if(res.error==0){
			uni.showToast({
				title:res.msg,
				icon:'none',
			});
			setTimeout(()=>{
				uni.hideLoading();
			},1000)
		}
		getDetail();
	}
	
</script>

<style lang="scss" scoped>
	.top-head {
		width: calc(100% - 42rpx - 30rpx);
		margin-left: 30rpx;
		margin-right: 42rpx;
		height: 70rpx;

		.switch-money {
			height: 43rpx;

			.switch-img {
				width: 30rpx;
				height: 27rpx;
			}

			.tips {
				width: 120rpx;
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: 500;
				line-height: 43rpx;
				text-align: center;
				letter-spacing: normal;
				color: #4C4C4C;
			}
		}

		.score {
			margin-right: 40rpx;
			;
			width: 144rpx;
			font-family: Source Han Sans;
			font-size: 36rpx;
			font-weight: 500;
			line-height: 52rpx;
			text-align: center;
			letter-spacing: normal;
			color: #141414
		}

		.rules {
			width: 60rpx;
			height: 43rpx;
			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: 500;
			line-height: normal;
			text-align: center;
			letter-spacing: normal;
			color: #9E9E9E;

			display: flex;
			justify-content: center;
			padding-top: 24rpx;
		}
	}

	.income {
		position: absolute;
		left: 30rpx;
		margin-top: -30rpx;
		z-index:8;

		.income-num {

			font-family: Source Han Sans;
			font-size: 72rpx;
			font-weight: 500;
			line-height: 104rpx;
			text-align: center;
			letter-spacing: normal;
			color: #282828;
		}

		.income-tips {
			font-family: Source Han Sans;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 35rpx;
			letter-spacing: normal;
			color: #696969;
		}

	}

	.rewards-box {
		position: relative;
		width: calc(100% - 48rpx - 30rpx);
		height: 305rpx;
		margin-right: 30rpx;
		margin-left: 48rpx;

		.rewards {
			.rewards-continue {
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: 500;
				line-height: 43rpx;
				letter-spacing: normal;
				color: #1F1F1F;
			}

			.rewards-tips {
				height: 32rpx;
				font-family: Source Han Sans;
				font-size: 22rpx;
				font-weight: 500;
				line-height: normal;
				letter-spacing: normal;

			}

			.color-b {
				color: #9E9E9E
			}

			.color-r {
				color: #DD4040
			}
		}

		.sign-jx {
			position: absolute;
			right: 0rpx;
			width: 273rpx;
			height: 246rpx;
		}
	}
</style>